<template>
  <a-modal
    v-model:visible="showModal"
    :mask-closable="false"
    title="添加收款账号"
    @cancel="onClose"
    @before-ok="onConfirm"
    width="45vw"
    unmount-on-close
  >
    <div class="section-item" style="margin-top: 0">
      <div class="section-item-content">
        <!-- 添加员工银行账户 -->
        <a-descriptions v-if="orderType == 'staffOrder'" :align="{ label: 'left' }" layout="inline-horizontal">
          <a-descriptions-item label="员工姓名">{{ accountInfo?.realname }}</a-descriptions-item>
          <a-descriptions-item label="员工手机号">{{ accountInfo?.phone }}</a-descriptions-item>
        </a-descriptions>
        <a-descriptions v-if="orderType == 'staffOrder'" :align="{ label: 'left' }" layout="inline-horizontal">
          <a-descriptions-item label="所属机构">{{ accountInfo?.organizationName }}</a-descriptions-item>
        </a-descriptions>
        <!-- 添加同行，供应商银行账户 -->
        <a-descriptions v-else :align="{ label: 'left' }" layout="inline-horizontal">
          <a-descriptions-item v-if="orderType == 'peerOrder'" label="同行名称">{{ accountInfo?.industryName }}</a-descriptions-item>
          <template v-if="orderType == 'supplierOrder'">
            <a-descriptions-item label="供应商名称">{{ accountInfo?.supplierName }}</a-descriptions-item>
            <a-descriptions-item label="供应商类型">{{ accountInfo?.supplierTypeName }}</a-descriptions-item>
          </template>
        </a-descriptions>
      </div>
    </div>
    <a-divider :margin="16" />
    <page-form :model="form" div="true" class="page-form" ref="formRef" layout="vertical">
      <page-form-row>
        <page-form-item size="1/2" field="inExpWay" label="收支方式" required :rules="{ required: true, message: '请输入收支方式' }">
          <a-select v-model="form.inExpWay" placeholder="请选择" :options="staffDict.inExpWayList" />
          <!-- <i-input placeholder="请输入" v-model="form.inExpWay" :max-length="50" /> -->
        </page-form-item>
        <page-form-item
          v-if="form.inExpWay"
          size="1/2"
          field="bankCardNumber"
          label="账号"
          required
          :rules="{ required: true, message: '请输入账号' }"
        >
          <i-input placeholder="请输入" v-model="form.bankCardNumber" :max-length="50" />
        </page-form-item>
        <page-form-item
          v-if="form.inExpWay && form.inExpWay == '1'"
          size="1/2"
          field="bank"
          label="开户行"
          required
          :rules="{ required: true, message: '请输入开户行' }"
        >
          <i-input placeholder="请输入" v-model="form.bank" :max-length="50" />
        </page-form-item>
        <!-- <page-form-item size="1/2" field="cityCode" label="开户地" required :rules="{ required: true, message: '请选择开户地' }">
          <city-cascader v-model="form.cityCode" @change="changeCityFn" />
        </page-form-item> -->
      </page-form-row>
    </page-form>
    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button type="primary" @click="onConfirm">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { addStaffBankInfo, addPeerBankInfo, addSupplierBankInfo } from '@/api/business/operateCost'
  import { usePageDict } from '@/hooks/useDict'

  const staffDict = usePageDict('staffDict')

  const form = ref({})

  const showModal = ref(false)
  // 订单类型
  const orderType = ref('')
  const accountInfo = ref({})
  const open = (type, val) => {
    orderType.value = type
    accountInfo.value = val
    form.value.id = val.id
    showModal.value = true
  }

  const onClose = () => {
    showModal.value = false
    form.value = {}
  }

  // const changeCityFn = (_, option = {}) => {
  //   console.log(option)
  //   form.value.provinceCode = option.provinceCode
  //   form.value.cityCode = option.cityCode
  //   form.value.provinceName = option.provinceName
  //   form.value.cityName = option.cityName
  //   form.value.address = undefined
  // }

  const formRef = ref()
  const validateFn = () => {
    return new Promise((resolve, reject) => {
      formRef.value.validate((error) => {
        if (error) {
          console.log(error)
          reject()
        } else {
          resolve()
        }
      })
    })
  }
  const emits = defineEmits(['addOk'])
  const onConfirm = (done) => {
    return new Promise((resolve, reject) => {
      validateFn()
        .then(() => {
          let handleWay =
            orderType.value == 'staffOrder' ? addStaffBankInfo : orderType.value == 'peerOrder' ? addPeerBankInfo : addSupplierBankInfo
          let params = {
            id: form.value.id,
            backInfoList: [
              {
                inExpWay: form.value.inExpWay,
                inExpWayName: staffDict.inExpWayList.find((item) => item.value == form.value.inExpWay)?.label,
                bankCardNumber: form.value.bankCardNumber,
                bank: form.value.bank,
                // provinceCode: form.value.provinceCode,
                // cityCode: form.value.cityCode,
                // provinceName: form.value.provinceName,
                // cityName: form.value.cityName,
              },
            ],
          }
          handleWay(params)
            .then((res) => {
              console.log(res)
              Message.success(res.message)
              emits('addOk', res.result)
              onClose()
              done()
              resolve()
            })
            .catch((err) => {
              console.log(err)
              // Message.error(err.message)
              reject()
            })
        })
        .catch(() => {
          reject()
        })
    })
  }

  defineExpose({
    open,
  })

  onMounted(() => {})
</script>

<style lang="less" scoped>
  .page-form {
    margin: 0;
    height: 300px;
    // padding: 0 60px;
    :deep(.arco-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    :deep(.arco-modal-body) {
      padding: 10px 80px !important;
    }
    :deep(.arco-col) {
      padding: 0 10px !important;
    }
  }
  .typeName {
    margin-bottom: 20px;
  }
  .typeNameLabel {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #4e5969;
    line-height: 22px;
    text-align: left;
  }
  .typeNameValue {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #1d2129;
  }
  .typeNameLabel2 {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #1d2129;
  }
  .feeItem {
    min-height: 46px;
    margin-top: 16px;
    background: rgba(247, 248, 250, 0.5);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    display: flex;
    padding-top: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
  }
  .descC {
    margin-top: 4px;
    color: rgb(140, 147, 155);
  }
</style>
